<template>
    <view class="gjl-view">
        <view class="top-bg">
            <image src="https://img.thumbrary.com/mzgd-readingplan.png" mode=""></image>
        </view>
        <view class="main">
            <view class="big-title">
                <image src="https://img.thumbrary.com/mzgd-readingplan-title.png" mode=""></image>
            </view>
            <view class="darkCalendar-box">
                <view class="inner">
                    <darkCalendar @selectOne="selectOne" :showDay="false" @changeMouth="changeMouth" :signeddates="dakaArr"></darkCalendar>
                </view>
            </view>
            <view class="readPlan-box2">
                <view class="title-box">
                    <view class="title">
                        {{timeStr}}
                    </view>
                    <view class="right" @click="$routerTo({path: '/pagesMine/bookstore/readingPlan'})">
                        <view class="text">
                            定制阅读计划
                        </view>
                        <mIcon type="arrRight" size="14" color="#999999"></mIcon>
                    </view>
                </view>
                <view class="step-box" v-if="haveData">
                    <view class="left-line">

                    </view>
                    <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
                        <view class="right-box">
                            <view class="readPlan-li" v-if="item && item.list && item.list.length" v-for="(item,index) in list" :key="index">
                                <view class="small-title-box">
                                    <view class="dot">
                                        <view class="small-dot">
                                            
                                        </view>
                                    </view>
                                    <view class="tag">{{item.date}}</view>
                                    <view class="text">共阅读{{item.num}}本书</view>
                                </view>
                                <scroll-view class="scroll-X" scroll-x="true" scroll-left="0">
                                    <view class="book-ul">
                                        <view class="book-li" v-for="(item2,index2) in item.list" :key="index2">
                                            <view class="img-box">
                                                <image :src="item2.bookstoreImg" mode="aspectFit"></image>
                                            </view>
                                        </view>
                                    </view>
                                </scroll-view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="noData" v-else>
                    暂无阅读信息哦~
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import darkCalendar from '@/components/dark-calendar/dark-calendar.vue'
    import service from "@/service";
    export default {
        components: {
            darkCalendar
        },
        data(){
            return{
                temp: '',
                timeStr: '',
                list: [],
                dates: []
            }
        },
        computed:{
            // 是否有阅读足迹
            haveData(){
                let n = 0;
                for(let i = 0; i < this.list.length; i ++){
                    if(this.list[i] && this.list[i].list && this.list[i].list.length){
                        n ++
                    }
                }
                return n
            }
        },
        mounted() {
            
        },
        onShow(){
            if(this.dates){
                this.changeMouth(this.dates)
            }
        },
        methods:{
            // 滚动到底部
            lower(){
                
            },
            selectOne(date,d,m,y){
                d = d*1
                var temp = new Date(date).getTime()/1000;
                service.mineService.BookstorePlan({
                    data: {
                        Timestamp: temp
                    },
                    success: res => {
                        let obj = {
                            list: res.result,
                            date: `${m}-${d}`,
                            num: res.result.length
                        }
                        this.$set(this.list,`${d - 1}`,obj)
                    },
                    fail: () => {
                
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            // 切换月份
            changeMouth(dates){
                this.dates = dates;
                var y , m, d
                for (let i = 0; i < dates.length; i++) {
                    if (dates[i].lm) {
                        y = dates[i].year
                        m = dates[i].month + 1
                        d = dates[i].date
                        this.selectOne(`${y}/${m}/${d}`,d,m,y)
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    page {
        height: 100%;
    }
    .noData{
        text-align: center;
        font-size: 24rpx;
        color: #999999;
        margin: 20rpx 0;
    }
    .gjl-view {
        min-height: 100%;
        background: rgba(255, 174, 69, 1);
        padding-bottom: 80rpx;
        overflow: hidden;

        .top-bg {
            display: flex;
            image {
                width: 750rpx;
                height: 919rpx;
            }
        }

        .main {
            margin: 0 30rpx;

            .darkCalendar-box {
                margin-top: 311rpx;
            }

            .big-title {
                margin-top: -797rpx;

                image {
                    height: 182rpx;
                    width: 494rpx;
                }
            }

            .line-24 {
                height: 1px;
                background-color: #E5E5E5;
                margin: 24rpx 0;
            }

            .readPlan-box2 {
                position: relative;
                z-index: 2;
                margin-top: 28rpx;
                background: rgba(255, 255, 255, 1);
                padding: 61rpx 20rpx 41rpx 40rpx;

                .step-box {
                    margin-top: 31rpx;
                    display: flex;

                    .left-line {
                        flex: 1 0 auto;
                        margin-left: 30rpx;
                        width: 4rpx;
                        height: 100%;
                        background: rgba(255, 174, 69, 1);
                        height: 900rpx;
                    }

                    .scroll-Y {
                        margin-left: -28rpx;
                        height: 900rpx;
                    }

                    .right-box {
                        padding-left: 28rpx;
                        margin-top: 31rpx;
                        margin-left: 25rpx;

                        .readPlan-li {
                            margin-top: 45rpx;

                            .book-ul {
                                margin-top: 20rpx;
                                display: flex;
                                align-items: center;

                                .book-li+.book-li {
                                    margin-left: 20rpx;
                                }

                                .book-li {
                                    .img-box {
                                        display: flex;

                                        image {
                                            width: 220rpx;
                                            height: 165rpx;
                                        }
                                    }
                                }
                            }

                            .small-title-box {
                                display: flex;
                                align-items: center;
                                position: relative;

                                .dot {
                                    border-radius: 50%;
                                    height: 28rpx;
                                    width: 28rpx;
                                    background: rgba(255, 174, 69, 0.2);
                                    position: absolute;
                                    top: 50%;
                                    left: -41rpx;
                                    transform: translateY(-50%);

                                    .small-dot {
                                        border-radius: 50%;
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        height: 80%;
                                        width: 80%;
                                        background: rgba(255, 174, 69, 1);
                                    }
                                }

                                .tag {
                                    padding: 0 11rpx;
                                    height: 38rpx;
                                    line-height: 38rpx;
                                    background: rgba(255, 174, 69, 1);
                                    border-radius: 4rpx;
                                    font-size: 28rpx;
                                    font-weight: 400;
                                    color: rgba(255, 255, 255, 1);
                                }

                                .text {
                                    margin-left: 28rpx;
                                    font-size: 28rpx;
                                    font-weight: 400;
                                    color: rgba(51, 51, 51, 1);
                                }
                            }
                        }
                    }
                }

                .title-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .title {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: rgba(51, 51, 51, 1);
                    }

                    .right {
                        display: flex;
                        align-items: center;

                        .text {
                            margin-right: 13rpx;
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                        }
                    }
                }

            }

            .readPlan-box {
                margin-top: 20rpx;
                background: rgba(255, 255, 255, 1);
                padding: 47rpx 20rpx 54rpx;

                .readPlan-ul {
                    margin-top: 16rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    .readPlan-li {
                        width: 310rpx;

                        .img-box {
                            display: flex;

                            image {
                                width: 310rpx;
                                height: 233rpx;
                                background: rgba(218, 218, 218, 1);
                            }
                        }

                        .name {
                            margin-top: 23rpx;
                            font-size: 28rpx;
                            font-weight: bold;
                            color: rgba(51, 51, 51, 1);
                        }
                    }
                }

                .title-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .yellow-title {
                        padding-left: 16rpx;
                        font-size: 32rpx;
                        font-weight: bold;
                        color: rgba(51, 51, 51, 1);
                    }

                    .right {
                        display: flex;
                        align-items: center;

                        .text {
                            margin-right: 13rpx;
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                        }
                    }
                }
            }
        }
    }
</style>
